<script lang="ts" setup>
// 组件引入
import Header from '@/components/header.vue'
import DataShow from "./component/DataShow.vue";
import DataConnection from "./component/DataConnection.vue";
import DataTask from "./component/DataTask.vue";
import DataFileManage from "./component/DataFileManage.vue";
import Audiofrequency from "./component/Audiofrequency.vue";
const EarthComponent = defineAsyncComponent(()=>{
  return import("@/components/EarthComponent.vue");
})
// 图表引入
import {Setting,House} from '@element-plus/icons-vue'

// 依赖项引入
import { onMounted, defineAsyncComponent } from "vue";
import * as Cesium from 'cesium'
import {parabola} from '../../utils/GV_DrawFn/earthFn'
import { useEarthStore } from "../../stores/earthObj";
const store = useEarthStore();
import { LineFlowMaterialProperty } from "../../utils/Material/lineFlowMaterialProperty";
onMounted(() => {
    // 初始化加载飞线
    drawParabolaLine()
});
// 添加抛物线飞线
function drawParabolaLine() {
  let viewer:any = store.getViewer();
  if (!viewer) return;
  let _center = [113.9236839, 22.528061];
  let _positions = [
    [113.8236839, 22.528061],
    [114.0236839, 22.528061],
    [113.9236839, 22.428061],
    [113.9236839, 22.628061],
    [113.8236839, 22.428061],
    [114.0236839, 22.628061],
    [113.8236839, 22.628061],
    [114.0236839, 22.428061],
  ];
  _positions.forEach((item) => {
    let _siglePositions = parabola(_center, item, 10000);
    // 创建飞线
    for (let i = 0; i < 3; i++) {
      viewer.entities.add({
        polyline: {
          positions: _siglePositions,
          material: new LineFlowMaterialProperty({
            color: new Cesium.Color(1.0, 1.0, 0.0, 0.8),
            speed: 2 * Math.random(),
            percent: 0.1,
            gradient: 0.01,
          }),
        },
      });
    }
    // 创建轨迹线
    let polyline = viewer.entities.add({
      polyline: {
        width: 3,
        positions: _siglePositions,
        material: Cesium.Color.fromCssColorString("#409eff").withAlpha(0.6),
      },
    });
    viewer.zoomTo(polyline);
  });

}

import { useRouter } from 'vue-router';
let router = useRouter()
// 去图形任务编辑界面
const toEditor = ()=>{
  router.push("editPage")
}
// 去图形任务编辑界面
const toManage = ()=>{
  router.push("manage")
}
</script>
<template>
  <div class="HomePage">
    <div class="Home_header">
      <Header>
        <template #HeadBtnIcon>
            <el-icon class="icon" @click="toEditor"><House /></el-icon>
            <el-icon class="icon" @click="toManage"><Setting /></el-icon>
        </template>
      </Header>
    </div>
    <DataConnection></DataConnection>
    <DataShow></DataShow>
    <DataTask></DataTask>
    <DataFileManage></DataFileManage>
    <Audiofrequency></Audiofrequency>
    <div class="Home_Container">
      <EarthComponent></EarthComponent>
    </div>

  </div>
</template>
<style scoped>
.HomePage {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
.Home_header {
  width: 100%;
  height: 50px;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #3b86ff61;
  z-index: 100;
}
.Home_Container {
  position: absolute;
  left: calc(27% + 9px);
  top: 8%;
  width: 45%;
  height: 71%;
  border-radius: 10px;
  overflow: hidden;
}
.icon{
  cursor: pointer;
  margin: 0 7px;
  font-size: 18px;
}
</style>
